<template>
  <div>
    <h2>父组件</h2>
    <div>
      <h3>父组件中的数据：</h3>
      <p>传递给子组件的属性：</p>
      <ul class="attr-list">
        <li><strong>标题：</strong>{{ title }}</li>
        <li><strong>消息：</strong>{{ message }}</li>
        <li><strong>数量：</strong>{{ count }}</li>
      </ul>
    </div>
    <!-- 
      向子组件传递多个属性：
      1. 直接传递的属性会被收集到子组件的 $attrs 对象中
      2. 除非子组件显式声明为 props，否则这些属性会自动透传
      3. 可以传递事件处理函数、HTML 属性、自定义属性等
    -->
    <Child 
      :title="title"
      :message="message"
      :count="count"
      class="custom-child"
      data-test="test-attr"
      @custom-event="handleCustomEvent"
    />
  </div>
</template>

<script lang="ts" setup>
/**
 * $attrs 详解 - 父组件部分
 * 
 * 1. 概念：
 *    $attrs 是 Vue 提供的一个特性，包含了传递给组件但未被该组件声明为 props 的所有属性。
 *    这些属性会自动透传到组件的根元素上（除非设置了 inheritAttrs: false）。
 * 
 * 2. 父组件的角色：
 *    - 向子组件传递各种属性和事件处理函数
 *    - 这些属性可以是数据、样式、事件处理函数等
 *    - 父组件不需要关心子组件是否声明了这些属性为 props
 * 
 * 3. 使用场景：
 *    3.1 组件封装：封装第三方组件时透传属性
 *    3.2 高阶组件：创建包装组件时保留原始组件的所有功能
 *    3.3 多层级组件通信：避免在中间组件中重复声明 props
 */

import { ref } from 'vue';
import Child from './child.vue';

// 定义要传递给子组件的数据
const title = ref('父组件：这是一个标题');
const message = ref('父组件：这是一条消息');
const count = ref(200);

// 处理从子组件或孙组件冒泡上来的自定义事件
function handleCustomEvent(payload) {
  console.log('父组件收到自定义事件:', payload);
  // 更新数据以展示事件通信效果
  message.value = `收到来自${payload.from}的消息: ${payload.text}`;
}
</script>

<style scoped>
/* 父组件样式 */
div {
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border-radius: 15px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: 15px;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

.attr-list {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  list-style-type: none;
  margin: 15px 0;
}

.attr-list li {
  margin: 8px 0;
}
</style>